<template>
  <div>
    <el-card class="kjrk">
      <div class="space-between">
        <h1 class="bold">快捷入口</h1>
        <svg-icon icon-class="more" class-name="more pointer" @click="handleClick" />
      </div>
      <div class="flex-warp">
        <div
          class="tac mb10 ml10 mr10 item pointer"
          v-for="item in dataList"
          :key="item.icon"
          @click="clickPages(item)"
        >
          <img class="icon-style" :src="imgUrl + item.icon" />
          <p class="fs14 text-overflow">{{ item.name }}</p>
        </div>
      </div>
    </el-card>

    <help-dialog title="菜单配置" :visible.sync="dialogVisible" @close="handleClose">
      <div class="label">已选(最多10个)</div>
      <div class="border-bottom">
        <div class="flex-warp">
          <div
            v-for="(item, index) in selectList"
            :key="item.icon"
            class="box tac mb10 ml10 mr10"
            @click="handleSelect(item, index, 2)"
          >
            <i class="el-icon-circle-plus-outline fr"></i>
            <img class="icon-style" :src="imgUrl + item.icon" />
            <p class="fs14">{{ item.name }}</p>
          </div>
        </div>
        <div v-show="selectList.length == 0" class="fs22 tac pb20">请选择</div>
      </div>
      <div class="flex-warp mt30">
        <div v-for="(v, index) in list" :key="v.icon" class="box tac mb10 ml10 mr10" @click="handleSelect(v, index, 1)">
          <i class="el-icon-circle-plus-outline fr"></i>
          <img class="icon-style" :src="imgUrl + v.icon" />
          <p class="fs14">{{ v.name }}</p>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleUpdate">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </help-dialog>
  </div>
</template>

<script>
import { deptAppMenu, homePageConfigModify } from '@/api/index'

export default {
  name: 'Kjrk',
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      imgUrl: process.env.VUE_APP_IMG_API,
      list: [],
      dialogVisible: false,
      selectList: []
    }
  },
  methods: {
    getList() {
      deptAppMenu().then((res) => {
        const arr = JSON.parse(JSON.stringify(res.data))

        if (this.dataList && this.dataList.length > 0) {
          for (let i in this.dataList) {
            for (let v in arr) {
              if (this.dataList[i].id == arr[v].id) {
                arr.splice(v, 1)
              }
            }
          }
        }
        this.list = arr
      })
    },
    handleClick() {
      this.getList()
      if (this.dataList && this.dataList.length > 0) {
        this.selectList = this.dataList
      }

      this.dialogVisible = true
    },
    handleSelect(item, index, type) {
      if (type == 1) {
        this.selectList.push(item)
        this.list.splice(index, 1)
      } else {
        this.list.push(item)
        this.selectList.splice(index, 1)
      }
    },
    handleClose() {
      this.selectList = []
      this.$emit('update')
    },
    handleUpdate() {
      const arr = this.selectList.map((e) => e.id)
      if (arr.length > 10) return this.$message.warning('最多10个')
      homePageConfigModify({ id: this.id, quickEntryButton: arr }).then((res) => {
        this.$message.success('操作成功')
        this.dialogVisible = false
        this.$emit('update')
      })
    },
    clickPages(item) {
      if (item.skipType == 0) {
        this.$router.push(item.component)
      } else if (item.skipType == 1) {
        const path = this.$router.resolve({ path: item.component })
        window.open(path.href, '_blank')
      } else {
        window.open(item.component, '_blank')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.kjrk {
  height: 300px;
}
.label {
  font-size: 16px;
  font-weight: 700;
  color: #409eff;
  margin: 20px 0;
  border-left: 3px solid;
  padding-left: 5px;
  line-height: 20px;
}
.more {
  height: 20px;
  width: 20px;
}
.icon-style {
  height: 50px;
  width: 50px;
}
.border-bottom {
  border-bottom: 1px #409eff dashed;
}
.box {
  width: 100px;
}
.item {
  width: 15%;
}
</style>
